<template>
    <div class="add-store" v-loading="loading">
        <!-- 导航栏 -->
        <tz-breadcrumb  :pathArr='[{"name": "商家"},{"name": "网商银行列表", "url": "/internet-bank-list"},{"name": "配置子商户", "url": "/internet-bank-add-children-merchant"}]'></tz-breadcrumb>
        <div style="margin: 20px;"></div>
        <el-card class="box-card" v-show="showDetail == true" >
          <el-form :inline="true" :model="formInline" class="form text-center" label-position="left" label-width="120px" >
          <div class="text item">
            <div class="formLineBorder" >
              <el-form-item label="商户号" class="form-item">
                <el-input v-model="formInline.MerchantId" placeholder="请输入您的商户号" disabled></el-input>
              </el-form-item>
            </div>
             <div class="formLineBorder" >
                <el-form-item label="" class="form-item">
                   <el-radio-group v-model="radioSelect" @change="configMerchantClick">
                      <el-radio  label="1" >配置js授权目录</el-radio>
                      <el-radio v-model="radioSelect" label="2" >配置支付appid</el-radio>
                   </el-radio-group >
                </el-form-item>
                
            </div>
            <div class="formLineBorder" v-show = "pathShow == true">
              <el-form-item label="js授权目录" class="form-item">
                <el-input v-model="formInline.Path" placeholder="请输入您的js授权目录"  ></el-input>
              </el-form-item>
            </div>
            <div class="formLineBorder" v-show = "payAndPublic == true">
              <el-form-item label="关联APPID" class="form-item">
                <el-input v-model="formInline.Appid" placeholder="请输入您的关联APPID"  ></el-input>
              </el-form-item>
            </div>
            <div class="formLineBorder" v-show = "payAndPublic == true">
              <el-form-item label="公众号APPID" class="form-item">
                <el-input class="bigerInput" v-model="formInline.SubscribeAppid" placeholder="请输入您的特约商户或渠道号的公众号APPID" ></el-input>
              </el-form-item>
            </div>
            <div class="formLineBorder" >
              <el-form-item label="微信渠道号" class="form-item">
                <el-select class="bigerInput" v-model="formInline.WechatChannel" placeholder="不选择默认将配置添加到商户进件的所有渠道" @change = "qudaoClick">
                  <el-option
                    label="全部"
                    value="">
                  </el-option>
                  <el-option
                    v-for="item in options"
                    :key="item.ChannelId"
                    :label="item.ChannelId"
                    :value="item.ChannelId">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="formLineBorder" >
              <el-form-item label="关注配置类型" class="form-item">
                  <el-select  v-model="formInline.SubscribeAppidType" placeholder="请选择 关注配置类型">
                    <el-option v-for="item in SubscribeAppidTypeList" :key="item.store_type" :label="item.store_type_desc" :value="item.store_type"> </el-option>
                  </el-select>
               </el-form-item>
            </div>
            <div class="formLineBorder">
                      <el-form-item label="" class="form-item">
                        <div class="btnBorder">
                        <el-button class="saveBtn" type="primary" @click="cancelInternetBank" >取消</el-button>
                        <el-button class="saveBtn" type="primary" @click="addInternetBank" >确定</el-button>
                        </div>
                      </el-form-item>
            </div>
            <!-- <div class="">目前只支持同时传APPID＋推荐关注的公众号，或支付授权目录</div> -->
          </div>
          </el-form>
        </el-card> 
    </div>
</template>
<script>
import api from './../../api/api';
import http from './../../config/index';
import tzBreadcrumb from './../../components/breadcrumb/breadcrumb.vue';
export default {
  mounted: function () {
    // 商户入驻结果查询
    this.getResidentInquiry();
    // 详情接口获取微信渠道列表
    this.getDetailData();
    // 默认显示
    this.pathShow = true;
  },
  data () {
    return {
      // 是否加载
      loading: false,
      // 全局是否显示
      showDetail: false,
      radioSelect: '1',
      options: [],
      // 关联appid和公众号appid是否可以填写
      payAndPublic: false,
      // js授权目录
      pathShow: false,
      // 负责人证件类型列表
      SubscribeAppidTypeList: [{
        store_type: 'MINI_PROGRAM',
        store_type_desc: '小程序'
      }, {
        store_type: 'SUBSCRIPTION',
        store_type_desc: '公众号'
      }],
      formInline: {
        // 商户号
        MerchantId: '',
        // js授权目录
        path: '',
        // 关联APPID
        Appid: '',
        // 特约商户或渠道号的公众号APPID
        SubscribeAppid: '',
        // 微信渠道号
        WechatChannel: '',
        // 关注配置类型
        SubscribeAppidType: 'SUBSCRIPTION'
      }
    };
  },
  components: {
    'tz-breadcrumb': tzBreadcrumb
  },
  methods: {
    qudaoClick () {
      console.log(this.formInline.WechatChannel);
    },
    configMerchantClick (id) {
      if (id === '1') {
        this.pathShow = true;
        this.payAndPublic = false;
        this.formInline.Appid = '';
        this.formInline.SubscribeAppid = '';
      } else {
        this.pathShow = false;
        this.payAndPublic = true;
        this.formInline.Path = '';
        console.log(this.formInline.Path);
      }
    },
    // 返回上一页
    cancelInternetBank () {
      this.$router.push({
        path: '/internet-bank-list',
        query: {
        }
      });
    },
    // 获取详情
    getDetailData () {
      let that = this;
      // 获取商户类型列表
      http.get(api.getEnterDetails, {
        token: localStorage.getItem('token'),
        store_code: this.$route.query.store_code ? this.$route.query.store_code : '',
        id: this.$route.query.id ? this.$route.query.id : ''
      }, response => {
        console.log(response);
        that.options = response.data[0].WechatChannelList;
      }, () => {
        console.log('网络错误');
      });
    },
    getResidentInquiry () {
      let that = this;
      // 商户入驻结果查询
      http.get(api.shoppinGunitQuery, {
        OrderNo: this.$route.query.order_no ? this.$route.query.order_no : ''
      }, response => {
        console.log(response);
        if (response.code === '10001') {
          // 成功展示状态并且赋值
          if (response.data[0].register_status === '1') {
            that.showDetail = true;
            that.formInline.MerchantId = response.data[0].merchant_id;
          } else if (response.data[0].register_status === '0') {
            this.$alert('人工审核中', '', {
              confirmButtonText: '确定',
              callback: action => {
                // this.$message({
                //   type: 'info',
                //   message: `action: ${action}`
                // });
              }
            });
            that.showDetail = false;
          } else {
            this.$alert('网商银行入驻失败', '', {
              confirmButtonText: '确定',
              callback: action => {
              }
            });
            that.showDetail = false;
          }
        } else {
          that.$message.error(response.msg);
        }
      }, () => {
        console.log('网络错误');
        this.$message.error('网络错误，请稍后再试');
      });
    },
    // 新增子商户
    addInternetBank () {
      let that = this;
      that.loading = true;
      http.post(api.addMerchantConfig, that.formInline, (res) => {
        console.log(res);
        that.loading = false;
        if (res.code === '10001') {
          that.$message.success('新增微信子商户成功');
          return false;
        } else {
          that.$message.error(res.data[0].RespInfo.ResultMsg);
          console.log(res.data[0].RespInfo.ResultMsg);
        }
      }, (err) => {
        console.log(err);
        that.loading = false;
        that.$message.error('网络异常，请稍后再试');
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
.form
  box-sizing: border-box
  background: #fff
  .step
    margin: 55px 0;
    width: 600px;
    display: inline-block
    .step-title
      border-left: 5px solid #36ADCB
      padding-left: 5px
      font-size: 16px
      margin-bottom: 15px;
  .line
    border-top: 1px solid #ABABAB;
  .next-btn
    padding-top: 25px
.formLineBorder
  position: relative
  margin-left:10px
  text-align:center;
  .btnBorder
    margin-left: 120px
  .bigerInput
    width: 330px;
  .xsInput
    width: 60px
    text-align: center
    margin-left: 10px
  .small-input
    width:202px
  .starFill
    position: absolute;
    top: 12px;
    left: -10px;
    color: #f00
    font-size: 14px
  .form-item
    display: block
    text-align: left
    .img-path
      width: 125px
      height: 39px
      position: absolute
      top: 0
      left: 0
      cursor: pointer
    .send-btn
      width:111px
    .show-img
      opacity: 1
    .hide
      opacity: 0
    .btn-no-bg
      background: none
    .passwordInput
      width: 400px
.rows
  width:100%
  margin-bottom: 10px    
  .images
    position:relative
    border: 1px solid #ababab;
    height: 160px;
    width: 120px;
    margin-bottom:15px
    text-align: center;
    .addimg
      margin: 50px auto 15px
      display: inline-block
      width: 30px
      height: 30px
    .imgshow
      position: absolute
      top: 0
      left: 0
      width: 122px
      height: 162px
    .avatar-uploader
      position: absolute
      top: 0
      left: 0
      width: 100%
      height: 100%
      cursor: pointer
      overflow: hidden
      opacity:0
    .show
      width:120px;
      height:160px;
      background:rgba(0,0,0,.3);
      top:0px;
      position:absolute;
      opacity: 0;
      display: block;
      font-size: 12px;
      transition: 0.3s;
      -webkit-transition: .2s;
      -moz-transition: .2s;
      .look
        color:#fff
        font-size:14px
        text-decoration:underline
        height:135px
        line-height:135px
        cursor:pointer
      .again
        color:#008AFA
        font-size:12px
        text-decoration:underline
        height:25px
        line-height:25px
        background:rgba(255,255,255,.3)
        cursor:pointer          
  .images:hover
    .show
      opacity: 1;
    .text-contain
      width: 122px;
  .mb20
    margin-bottom: 20px
</style>
